<script setup lang="ts">
import { ref } from "vue";
import axios from "axios";
// 选择器
import Sxzj from "./sxzj/index.vue";

// 科普组件
import xgkp from "./xgkp/index.vue";
// 医生组件
import ys from "./ys/index.vue";
import { useRoute } from "vue-router";

const active = ref(0);
// 开关
let kg = false;
// 搜索历史记录
let searitem = true;
// tab切换
let table = false;
const route = useRoute()
// 搜索输入框的值
const searchValue = ref<any>('');
let sdata = route.query
searchValue.value = sdata[0]

// 存储搜索结果的列表
const searchResults = ref([]);
// 搜索条数
const searLength = 10;
// getItem 获取本地存储
const historyList = ref(JSON.parse(localStorage.getItem("historyList")as string) || []);
const search = () => {
  

  // 模糊搜索的方法
  if (searchValue.value) {
    searchResults.value = dataList.value.filter(
      (item) =>
        item.doctorname.includes(searchValue.value) ||
        item.doctordescword.includes(searchValue.value)
    );
    // 判断搜索是否有数据
    if (searchResults.value.length > 0) {
      kg = true;
      searitem = false;
      table = true;
    } else {
      kg = false;
      searitem = true;
      table = false;
    }
    // unshift() 方法将一个或多个元素添加到数组的开头，并返回新数组的长度。不用push()的原因是push()方法会将元素添加到数组的末尾，而unshift()方法会将元素添加到数组的开头。
    historyList.value.unshift(searchValue.value);
    // 去重
    historyList.value = [...new Set(historyList.value)];
    // 移除数组中的第一个元素，即最早的历史记录
    if (historyList.value.length > searLength) {
      historyList.value.shift();
    }
    // setItem() 方法用于将指定的值存储到 localStorage 对象中，以键值对的形式存储。在这里，我们将历史记录存储在 localStorage 中，以便在用户下次访问页面时可以继续使用。
    localStorage.setItem("historyList", JSON.stringify(historyList.value));
  } else {
    searchResults.value = [];
  }
};

// 获取数据并存储
const dataList = ref([]);
const getData = async () => {
  await axios
    .get("/api/hospital", {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then((res) => {
      dataList.value = res.data.data.slice(0, 1000);
    });
};
getData();

// 清空搜索框
const clear = () => {
  searchValue.value = "";
  searchResults.value = [];
  searchResults.value.length = 0;
  kg = false;
};

// 清空历史记录
const del = () => {
  localStorage.removeItem("historyList");
  historyList.value = [];
};

// 点击历史记录搜索
const searchItem = (item: string) => {
  searchValue.value = item;
  search();
};

// 科室数据
const ksList = ref([]);
const ksList1 = ref([]);
const ksData = async () => {
  await axios
    .get("/api/department", {
      params: {
        pageCode: 1,
        pageSize: 10,
      },
    })
    .then((res) => {
      ksList.value = res.data.data.slice(0, 5);
      ksList1.value = res.data.data.slice(6, 10);
    });
};
ksData();
</script>

<template>
  <div>
    <van-nav-bar title="搜索" left-arrow @click-left="$router.back()">
    <template #right>
      <van-icon name="weapp-nav" size="18" />
    </template>
  </van-nav-bar>
  
  <div class="box" style="font-size: 0.3rem">

    <div class="top">
      <van-icon size="20" name="search" />
      <input
        type="text"
        style="height: 100%; width: 230px"
        v-model="searchValue"
        placeholder="输入关键词搜索"
      />
      <van-icon
        @click="clear"
        style="margin-left: 4%"
        color="#ccc"
        size="18"
        name="clear"
      />
      <span @click="search">搜索</span>
    </div>
    <!-- 历史记录 -->
    <div class="lsjl" v-if="searitem">
      <div class="lsjl-top">
        <span style="font-size: 0.35rem; font-weight: bold">历史记录</span>
        <van-icon name="delete" @click="del" />
      </div>
      <div class="lsjl-com">
        <span v-for="(item, ind) in historyList" @click="searchItem(item)">{{
          item
        }}</span>
      </div>
    </div>
    <!-- tab切换 -->
    <div v-if="table">
      <van-tabs v-model:active="active">
        <van-tab title="综合">
          <div class="tab-item1">
            <!-- 科普 -->
            <div
              class="kp"
              style="height: 300px; overflow: hidden; border-radius: 0.5rem"
            >
              <div class="topboc" v-if="kg">
                <span class="title">相关科普</span>
                <span class="more">查看更多<van-icon name="arrow" /></span>
              </div>
              <xgkp :arrMsg="searchResults" :kg="kg" />
            </div>
            <!-- 医生 -->
            <div
              class="ys"
              style="height: 490px; overflow: hidden; border-radius: 0.5rem"
            >
              <div class="topboc" v-if="kg">
                <span class="title">相关医生</span>
                <span class="more">查看更多<van-icon name="arrow" /></span>
              </div>
              <ys :arrMsg="searchResults" :kg="kg" />
            </div>
          </div>
        </van-tab>
        <van-tab title="医生">
          <Sxzj />
          <!-- 医生组件 -->
          <div class="ysdy">
            <ys :arrMsg="searchResults" :kg="kg" />
          </div>
        </van-tab>
        <van-tab title="科普">
          <div class="kpdy">
            <div class="kplength">
            共找到相关结果
            <span style="color: #006eff">{{ searchResults.length }}</span>
            条
          </div>
          <!-- 相关科普组件 -->
          <xgkp :arrMsg="searchResults" :kg="kg" />
          </div>
        </van-tab>
        <van-tab title="医院">内容 4</van-tab>
        <van-tab title="药品">内容 5</van-tab>
      </van-tabs>
    </div>
  </div>
  </div>
</template>

<style scoped>
* {
  font-size: 0.27rem;
}

.kpdy{
  height: 550px;
  overflow: scroll;
}
.ysdy{
  height: 500px;
  overflow: scroll;
}
.kplength {
  width: 95%;
  background-color: #fff;
  height: 50px;
  margin-left: 2.5%;
  line-height: 50px;
  font-size: 0.35rem;
  margin-top: 10px;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  border-bottom: 1px solid #e3e3e3;
  padding-left: 10px;
}
.top {
  width: 95%;
  height: 35px;
  margin-left: 2.5%;
  background-color: #e5e5e5;
  border-radius: 5px;
  display: flex;
  align-items: center;
  padding: 0 10px;
}

.top input {
  border: none;
  background-color: #e5e5e5;
}

.top span {
  margin-left: 20px;
  color: #006eff;
}

.box {
  width: 100%;
  height: 93%;
  overflow: hidden;
  background-color: #f5f5f5;
}

.tab-item1 {
  width: 100%;
  height: 540px;
  overflow-y: scroll;
  padding-bottom: 10px;
}

.lsjl {
  width: 100%;
  padding-bottom: 20px;
}

.lsjl-top {
  width: 95%;
  height: 40px;
  margin-left: 2.5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.lsjl-com {
  width: 95%;
  margin-left: 2.5%;
  overflow: hidden;
}

.lsjl-com span {
  padding: 7px 15px;
  background-color: #ffffff;
  border-radius: 5px;
  float: left;
  margin-right: 10px;
  margin-bottom: 10px;
}
.topboc {
  width: 95%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #e3e3e3;
  align-items: center;
  background-color: #fff;
  padding: 0 10px;
  margin-left: 2.5%;
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  margin-top: 10px;
}
.topboc .title {
  font-size: 0.35rem;
  font-weight: bolder;
}
.topboc .more {
  color: #999;
  font-size: 0.35rem;
}
</style>
